Stadium

Appearance

움직이는 스프라이트 ​

다음 개념을 사용합니다:

맵 만들기에서 만든 맵의 스프라이트를 움직여보겠습니다. 스프라이트를 움직이기 위해서는 Animate Hook을 사용합니다.

만들어볼 맵은 다음과 같습니다. 아래 맵은 브라우저에서 Stadium을 통해 직접 그려졌습니다.

이전 코드 ​

맵 만들기에서 만든 코드를 가져옵니다.

js
import { Stadium, ImageSprite } from "@rycont/stadium";

const element = document.getElementById("stadium");

const stadium = new Stadium(element, {
  width: 800,
  height: 600,
});

const src = "https://picsum.photos/200";

const size = { width: 80, height: 80 };
const position = { left: 140, top: 240 };

const image = new ImageSprite({ src, size, position });
stadium.add(image);

Hook 이해하기 ​

Hook은 스프라이트의 기능을 확장합니다. 다음과 같이 사용합니다.

js
import { Animate } from "@rycont/stadium";

const animate = new Animate(); // Hook의 인스턴스를 만듭니다
image.use([animate]); // 스프라이트에 추가합니다

Animate Hook 사용해보기 ​

Animate Hook으로 스프라이트를 부드럽게 움직일 수 있습니다.

js
animate.moveBy(80, 0, 3000); // 3초 동안 오른쪽으로 80, 아래로 0 만큼 이동
animate.moveTo(120, 120, 800); // 0.8초 동안 (120, 120) 위치로 이동

전체 코드 ​

js
import { Stadium, ImageSprite, Animate } from "@rycont/stadium";

const element = document.getElementById("stadium");

const stadium = new Stadium(element, {
  width: 800,
  height: 600,
});

const src = "https://picsum.photos/200";
const size = { width: 80, height: 80 };
const position = { left: 140, top: 240 };

const image = new ImageSprite({ src, size, position });

const animate = new Animate();
image.use([animate]);

stadium.add(image);

animate.moveBy(80, 0, 3000);
animate.moveTo(120, 120, 2000);

더 나아가기 ​

어떤 Hook에는 PubSub 기능이 있어서, 이벤트를 구독할 수 있습니다. 예를 들어, Animate Hook에서는 다음과 같은 이벤트가 발생합니다.

  • start: 애니메이션이 시작될 때
  • end: 애니메이션이 끝날 때

이벤트를 구독하려면 다음과 같이 합니다.

js
// 애니메이션 시작 이벤트 구독
animate.pubsub.sub("start", (from: Point, to: Point) => {
  console.log(from, "에서", to, "로 이동합니다.");
});

// 애니메이션 끝 이벤트 구독
animate.pubsub.sub("end", (from: Point, to: Point) => {
  console.log(from, "에서", to, "로 이동했습니다.");
});

Hook에 어떤 이벤트가 있는지 각 문서에 설명되어 있습니다.